<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="head-container">
            <el-form-item prop="datasourceId">
              <el-select
                v-model="datasourceId"
                placeholder="请选择数据源"
                size="small"
                style="width: 100%"
                @change="changeDb"
              >
                <el-option
                  v-for="datasource in datasourceList"
                  :key="datasource.id"
                  :label="datasource.datasourceName"
                  :value="datasource.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="head-container">
            <el-form-item>
              <ColumnTree
                v-if="datasourceId"
                ref="columnSelect"
                :datasourceId.sync="datasourceId"
                :showCheckbox="showCheckbox"
                :isDimension="isDimension"
                @node-click="handleNodeClick"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="19">
          <DetailValue
            ref="detailValue"
            :datasourceId="datasourceId"
            :colnameAliasId="colnameAliasId"
            :columnAlias="columnAlias"
          />
        </el-col>
      </el-row>
    </el-form>

  </div>

</template>

<script>
  import DetailValue from "./detail"
  import { listDatasource } from '@/api/metadata/datasource'
  import ColumnTree from '@/components/ColumnTree';

  export default {
    name: 'detail',
    components: { ColumnTree , DetailValue},
    data() {
      return {
        //遮罩
        loading: false,
        showCheckbox: false, //ColumnTree 组件是否显示checkbox
        isDimension: '1',  // ColumnTree 是否只显示维度
        selectColumn: undefined,
        datasourceList: [], // 资源列表
        datasourceId: undefined,
        columnAlias: undefined,
        colnameAliasId: undefined
      }
    },
    created() {
      listDatasource({ current: 1, size: 1000 }).then(response => {
        this.datasourceList = response.data.records;
      })
    },
    methods: {
      handleNodeClick(node) {
        if (node.level === 3) {
          if (node.data.columnAlias)
            this.columnAlias = node.data.columnAlias
          else
            this.columnAlias = node.data.columnName

          this.colnameAliasId = node.data.id;
        }
      },
      // 选择数据源
      changeDb(val) {
        this.datasourceId = val;
      }
    }
  }
</script>

<style scoped>

</style>
